<template>
	<view :class="{'bgc': flag}" class="content">
		<view class="choice">
			<view class="choiceImg">
				<!-- <image src="../../static/image/compile.png" mode=""></image> -->
				<view class="choiceAddress">
					商家地址:中原国家广告产业园103户
					<!-- <pickers @address="address">
					请选择收货地址
					</pickers> -->
				</view>
				<view class="" style="display: flex;">
					<image src="../../static/image/address.png" style="width: 35rpx;height: 35rpx;margin-left: 50rpx;margin-right: 10rpx;"></image>
					<view style="font-size: 30rpx;color: #F41640;font-weight: 500;">导航</view>
				</view>
				
			</view>
			<!-- <view class="you" @click="addRess">
				<image src="../../static/image/right.png" mode=""></image>
			</view> -->
			<image class="heng" src="../../static/image/line.png" mode=""></image>
		</view>
		<view class="Shangchao">
			<view class="chaoImg">
				<image src="../../static/image/logo.png" mode=""></image>
			</view>
			<view class="service">
				<view class="">包裹1：</view>
				<view class="">16点前下单，最快次日到达，预计1-4日到达</view>
			</view>
			<view class="info" v-for="(item,index) in list" :key="index">
				<view class="infoLeft">
					<view class="infoImg">
						<image :src="item.img" mode=""></image>
					</view>
					<view class="infoLeftText">
						<view class="textTitle">{{item.title}}</view>
						<view class="textPrice">{{item.price}}</view>
					</view>
				</view>
				<view class="infoRight">
					<view class="rightNumber">共{{item.number}}件</view>
						<image src="../../static/image/right.png" mode=""></image>
				</view>
			</view>
			<view class="shangInfo">
				<view class="shangPrice">商品金额</view>
				<view class="oriceNum">￥400.0</view>
			</view>
			<view class="shangInfo">
				<view class="shangPrice">基础配送费</view>
				<view class="oriceNum">￥20</view>
			</view>
			<view class="Subtotal">小计：￥400.0</view>
		</view>
	</view>
</template>

<script>
// import pickers from "../../components/ming-picker/ming-picker.vue"
	export default{
		// components: {
		// 	pickers
		// },
		data() {
			return{
				list: [
					{
						id: 1,
						img: '../../static/image/store-img.png',
						title: 'ROYCE若翼族生巧克力',
						price: '￥200.00  /盒',
						number: '1'
					},
					{
						id: 2,
						img: '../../static/image/store-img.png',
						title: 'ROYCE若翼族生巧克力',
						price: '￥200.00  /盒',
						number: '1'
					}
				],
				flag : false
			}
		},
		computed:{
        },
		onShow() {
			uni.getLocation({
				// type: 'wgs84',
				success: function (res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
				}
			});
		},
		methods: {
			// 省市区选择 
			address(e) {
				console.log(e)
			},
			addRess() {
				uni.navigateTo({
					url: '../address/address'
				})
			},
			mobile() {
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.bgc{
		background-color: #000;
	}
	.content{
		padding: 20rpx 30rpx;
		background-color: #eee;
		height: 100vh;
	}
	.choice{
		display: flex;
		height:126rpx;
		background-color: #fff;
		justify-content: space-between;
		align-items:center;
		padding:0 20rpx;
		border-radius: 20rpx;
		position:relative;
		.choiceImg{
			display:flex;
			align-items:center;
			image{
				width: 39rpx;
				height: 39rpx;
				margin-right: 36rpx;
			}
			.choiceAddress{
				font-size: 30rpx;
				font-weight: 500;
			}
		}
		.you{
			width: 25rpx;
			height: 25rpx;
			line-height: 31rpx;
			image{
				width: 100%;
				height: 100%;
				
			}
		}
		.heng{
			height: 10rpx;
			position: absolute;
			left: 0;
			bottom:0;
			width: 100%;
		}
	}
	.Shangchao{
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		.chaoImg{
			height: 27rpx;
			width: 154rpx;
			margin-bottom:20rpx;
			image{
				height: 100%;
				width: 100%;
			}
		}
		.service{
			background: #F5F5F5;
			height: 46rpx;
			line-height: 46rpx;
			display:flex;
			justify-content: space-around;
			margin-bottom:17rpx;
			margin-top:30rpx;
			border-radius:20rpx;
			view{
				font-size: 24rpx;
			}
		}
		.info{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding:20rpx;
			border-bottom:2rpx solid #eee;
			.infoLeft{
				display:flex;
				align-items:center;
				flex:75%;
				.infoImg{
					width: 102rpx;
					height: 102rpx;
					margin-right:30rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.infoLeftText{
					width: 275rpx;
					.textTitle{
						color: #333;
						font-size: 26rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
							
					}
					.textPrice{
						color:#999999;
						font-size: 24rpx;
					}
				}
			}
			.infoRight{
				width: 20%;
				display: flex;
				align-items:center;
				.rightNumber{
					color: #999999;
					font-size: 24rpx;
					margin-right: 20rpx;
				}
				image{
					width: 20rpx;
					height: 20rpx;
				}
			}
		}
		.shangInfo{
			display: flex;
			justify-content: space-between;
			border-bottom:2rpx solid #eee;
			padding-bottom:20rpx;
			view{
				color: #4D4D4D;
				font-size: 24rpx;
				margin: 20rpx 0;
			}
		}
		.Subtotal{
			padding: 30rpx 0;
			text-align: right;
			color: #1A1A1A;
			font-size: 24rpx;
		}
	}
	
	
	
	.share-show {
    transition: all 0.3s ease;
    transform: translateY(0%) !important;
}
// 离开分享动画
.share-item {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    background-color: #FFFFFF;
    transition: all 0.3s ease;
    transform: translateY(100%);
    z-index: 1999;
}
</style>
